<script setup lang="ts">
defineOptions({
  name: "sno-dialog",
});

import { computed } from "vue";
import { ElDialog, ElButton } from "element-plus";
import { defualtProps } from "./props";

/**
 * @description 弹窗组件
 */
const props = defineProps(defualtProps);

const emits = defineEmits<{
  (e: "cancel"): void;
  (e: "confirm"): void;
  (e: "update:modelValue", val: boolean): void;
}>();

const close = () => {
  visible.value = false;
};

const cancel = () => {
  emits("cancel");
  close();
};
const confirm = () => {
  emits("confirm");
  close();
};

const defaultConfig = {
  "append-to-body": false,
  "close-on-click-modal": false,
  width: "50%",
};

const setConfig = computed(() => ({ ...defaultConfig, ...props.config }));

const visible = computed({
  get: () => props.modelValue,
  set: (val) => {
    emits("update:modelValue", val);
  },
});
</script>

<template>
  <el-dialog v-model="visible" class="sno-dialog">
    <template #header v-if="$slots.header">
      <slot name="header"></slot>
    </template>
    <template #default>
      <slot></slot>
    </template>
    <template #footer v-if="showFooter">
      <div class="sno-dialog-footer">
        <slot name="footer"></slot>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
